import {trigger, state, style, animate, transition} from '@angular/animations';
//从不同的状态下进场和离场
export const leave = trigger('heroState', [
  state('inactive', style({transform: 'translateX(0) scale(1)'})),
  state('active', style({transform: 'translateX(0) scale(1.1)'})),
  transition('inactive => active', animate('100ms ease-in')),
  transition('active => inactive', animate('100ms ease-out')),
  transition('void => inactive', [
    style({transform: 'translateX(-100%) scale(1)'}),
    animate(100)
  ]),
  transition('inactive => void', [
    animate(100, style({transform: 'translateX(100%) scale(1)'}))
  ]),
  transition('void => active', [
    style({transform: 'translateX(0) scale(0)'}),
    animate(200)
  ]),
  transition('active => void', [
    animate(200, style({transform: 'translateX(0) scale(0)'}))
  ])
]);
